<template>
  <div>
      <!-- 搜索框 -->
      <van-search v-model="value" placeholder="请输入搜索关键词" />

      <!-- 标签页 -->
      <van-tabs v-model="active">
  <van-tab title="去油">
    <!-- 商品页面 -->
    <main>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 渲染出来的商品 -->
        <van-row type="flex" :gutter="8">
          <van-col span="12" v-for="(item, index) in guahua" :key="index" v-on:click.stop="clickItem(item)">
            <div class="goods-card-top"></div>
            <div class="goods-card">
              <van-row type="flex" justify="center">
                <van-col span="24">
                  <!-- <img :src="item.img" alt="" /> -->
                  <van-image fit="contain" radius="25%" :src="item.img" />
                </van-col>
              </van-row>

              <!-- 循环图片 -->
              <van-row type="flex" justify="center">
                <van-col span="24">
                  {{ item.miaoshu }}
                </van-col>
              </van-row>
              <br>
              <van-row type="flex" align="center" justify="space-between">
                <!-- 遍历价格 -->
                <van-col class="zhiti"> {{ item.money }} </van-col>
                <div>热销2万+</div>
                <van-col>
                  <van-icon
                    name="cart-circle"
                    :size="30"
                    @click="toAdd(item)"
                  />
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
      </van-pull-refresh>
    </main>
  </van-tab>
  <van-tab title="去屑">
    <!-- 商品页面 -->
    <main>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 渲染出来的商品 -->
        <van-row type="flex" :gutter="8">
          <van-col span="12" v-for="(item, index) in baozheng" :key="index" v-on:click.stop="clickItem(item)">
            <div class="goods-card-top"></div>
            <div class="goods-card">
              <van-row type="flex" justify="center">
                <van-col span="24">
                  <!-- <img :src="item.img" alt="" /> -->
                  <van-image fit="contain" radius="25%" :src="item.img" />
                </van-col>
              </van-row>

              <!-- 循环图片 -->
              <van-row type="flex" justify="center">
                <van-col span="24">
                  {{ item.miaoshu }}
                </van-col>
              </van-row>
              <br>
              <van-row type="flex" align="center" justify="space-between">
                <!-- 遍历价格 -->
                <van-col class="zhiti">  {{ item.money }} </van-col>
                <div>热销2000+</div>
                <van-col>
                  <van-icon
                    name="cart-circle"
                    :size="30"
                    @click="toAdd(item)"
                  />
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
      </van-pull-refresh>
    </main>
  </van-tab>
  <van-tab title="生发">
    <!-- 商品页面 -->
    <main>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 渲染出来的商品 -->
        <van-row type="flex" :gutter="8">
          <van-col span="12" v-for="(item, index) in dengshen" :key="index" v-on:click.stop="clickItem(item)">
            <div class="goods-card-top"></div>
            <div class="goods-card">
              <van-row type="flex" justify="center">
                <van-col span="24">
                  <!-- <img :src="item.img" alt="" /> -->
                  <van-image fit="contain" radius="25%" :src="item.img" />
                </van-col>
              </van-row>

              <!-- 循环图片 -->
              <van-row type="flex" justify="center">
                <van-col span="24">
                  {{ item.miaoshu }}
                </van-col>
              </van-row>
              <br>
              <van-row type="flex" align="center" justify="space-between">
                <!-- 遍历价格 -->
                <van-col class="zhiti">  {{ item.money }} </van-col>
                <div>热销1万+</div>
                <van-col>
                  <van-icon
                    name="cart-circle"
                    :size="30"
                    @click="toAdd(item)"
                  />
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
      </van-pull-refresh>
    </main>
  </van-tab>
  <van-tab title="护发">
    <!-- 商品页面 -->
    <main>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 渲染出来的商品 -->
        <van-row type="flex" :gutter="8">
          <van-col span="12" v-for="(item, index) in kezi" :key="index" v-on:click.stop="clickItem(item)">
            <div class="goods-card-top"></div>
            <div class="goods-card">
              <van-row type="flex" justify="center">
                <van-col span="24">
                  <!-- <img :src="item.img" alt="" /> -->
                  <van-image fit="contain" radius="25%" :src="item.img" />
                </van-col>
              </van-row>

              <!-- 循环图片 -->
              <van-row type="flex" justify="center">
                <van-col span="24">
                  {{ item.miaoshu }}
                </van-col>
              </van-row>
              <br>
              <van-row type="flex" align="center" justify="space-between">
                <!-- 遍历价格 -->
                <van-col class="zhiti"> {{ item.money }} </van-col>
                <div>热销5000+</div>
                <van-col>
                  <van-icon
                    name="cart-circle"
                    :size="30"
                    @click="toAdd(item)"
                  />
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
      </van-pull-refresh>
    </main>
  </van-tab>
</van-tabs>

      
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';
 Vue.use(Lazyload);
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
import { Search } from 'vant';
Vue.use(Search);

//  import image1 from "../assets/1.jpg";
//  import image2 from "../assets/1.png";


export default {
  name: "ShangPinLan",
  components: {},
  data() {
    return {
      isLoading: true,
       images: [ 'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',],
        // 每次返回后默认跳到挂画栏
        active: 0,
         value: '',
    };
  },
 
  created() {
    Vue.use(Swipe);
Vue.use(SwipeItem);

  },
  computed: {
    ...mapState(["baozheng", "guahua", "kezi", "dengshen", "dibu"]),
  },
  methods: {
    // 点击事件：跳转至详情页面
    clickItem(item) {

      const query = {
        id: item.id
      }
      this.$router.push({ name: 'GoodsItem', query })
    },
    onRefresh() {
      const self = this;
      // 异步加载
      setTimeout(() => {
        self.isLoading = false;
        Toast("刷新成功");
      }, 100);
    },
    toAdd(item) {
      console.log("添加购物车", item, item.id);
      if (!item.id) {
        console.log("没有id");
        return;
      }
      this.$store.dispatch("AddGouWuChe", item).then(() => {
        alert("添加购物车成功");
      });
    },
  },
};
</script>
<style scoped>
.goods-card {
  border: 2px solid rgb(37, 167, 243);
  border-radius: 1em;
}
.goods-card-top {
  height: 0.5em;
}
.swip{
  border: 5px solid red;    
}
.zhiti{
  color: red;
  font-size : 25px;
}
</style>
